<script setup lang="ts">
interface Props {
  gameInfo?: {
    img?: string
    name?: string
    platform_id?: string
    platform_name: string
    game_id?: string
    [k: string]: any
    maintained: string
    game_type: string
    online_num: number
  }
  supplierInfo?: {
    icon: string
    id: number
    name: string
    platform_id: number
    platform_name: string
  }
  ty?: number | string
}

const props = withDefaults(defineProps<Props>(), {
})
const router = useRouter()
const route = useRoute()
const isFavorite = ref(props.gameInfo?.is_fav === 1)
const id = computed(() => props.gameInfo?.id)
// 是否收藏页面
const isFavoritePage = computed(() => route.fullPath.includes('/casino/favourites'))

// 添加收藏
const { run: runFavInsert, loading: loadingInsert } = useRequest(() => ApiMemberFavInsert(id.value), {
  ready: id,
  onSuccess() {
    isFavorite.value = true
  },
})
// 删除收藏
const { run: runFavDelete, loading: loadingDelete } = useRequest(() => ApiMemberFavDelete(id.value), {
  ready: id,
  onSuccess() {
    isFavorite.value = false
  },
})

// 是否原创游戏
const isOriginalGame = computed(() => props.gameInfo?.game_type === EnumGlobalGameType.original)
const isMaintained = computed(() => {
  return props.gameInfo?.maintained === '2'
})
const toPath = computed(() => {
  const r = Math.random().toString(36).slice(-10)
  if (!props.gameInfo) return ''
  const { id, name, platform_name, game_type, game_id, venue_id } = props.gameInfo
  const u = router.currentRoute.value.query.u
  const c = router.currentRoute.value.query.c

  const query: any = {
    id, name, pn: platform_name, type: game_type, code: game_id, vid: venue_id, game_id,
  }
  if (u) {
    query.uid = u
    query.u = u
  }

  if (c)
    query.c = c

  let q_ty = ''
  if (props.ty) {
    q_ty = `&ty=${props.ty}`
    query.ty = props.ty
  }

  if (isOriginalGame.value) {
    if (u && c)
      return `/casino/original-game/${game_id}?u=${u}&c=${c}${q_ty}`
    else if (u)
      return `/casino/original-game/${game_id}?u=${u}${q_ty}`
    else if (c)
      return `/casino/original-game/${game_id}?c=${c}${q_ty}`
    else
      return `/casino/original-game/${game_id}${q_ty.replace('&', '?')}`
  }

  return addUrlSearch(
    `/games/${id || r}`, application.objectToUrlParams(query),
  )
})

const gameImgUrl = computed(() => {
  if (!props.gameInfo) return;
  if (isOriginalGame.value && props.gameInfo.img) {
    const arr = props.gameInfo.img.split('/')
    arr[arr?.length - 1] = `${arr[arr?.length - 1]}`
    return arr.join('/')
  }
  return props.gameInfo.img
})

function gameStart() {
  if (!props.gameInfo) return;
  const { game_id, platform_id, game_type } = props.gameInfo

  if (isMaintained.value)
    return
  if (game_id === 'sglb' && [2, 3, 5].includes(+game_type)) {
    i18nNavigateTo(`/category?cid=${platform_id}&ty=2`)
    return
  }

  console.log('toPath.value', toPath.value, router.currentRoute.value)

  const last_game_id = Local.get('last_game_id')?.value
  let removeGamesAlive: any
  i18nNavigateTo(toPath.value)
  /*   if (last_game_id && props.gameInfo?.id && props.gameInfo.id !== last_game_id)
      removeGamesAlive = keepAliveStore.removeKeepAlive('KeepAliveCasinoGames')
  
    if (router.currentRoute.value.path.includes('/casino/games')) {
      removeGamesAlive = keepAliveStore.removeKeepAlive('KeepAliveCasinoGames')
      nextTick(() => {
        setTimeout(() => {
          router.replace(toPath.value)
          // removeGamesAlive && removeGamesAlive()
        }, 0)
      })
    }
    else {
      nextTick(() => {
        setTimeout(() => {
          i18nNavigateTo(toPath.value)
          removeGamesAlive && removeGamesAlive()
        }, 0)
      })
    } */

  /*  if (isMobile.value)
     closeSearchH5()
   else
     closeSearch() */
}
function toSupplier() {
  i18nNavigateTo(toPath.value)
}

/**
 * 获取缩略图地址（xxx.webp => xxx.s.webp）
 * @param url
 */
/* function getThumbnailUrl(url: string) {
  const arr = url.split('.')
  arr.splice(arr.length - 1, 0, 's')
  return arr.join('.')
}
 */
/* function keepGame() {
  if (!isLogin.value) {
    openLoginDialog()
    return
  }
  if (loadingInsert.value || loadingDelete.value)
    return

  if (isFavorite.value) {
    runFavDelete()
    return
  }
  runFavInsert()
} */

</script>

<template>
  <div v-if="gameInfo" @click="gameStart" class="relative flex  flex-col items-center overflow-hidden rounded-lg group">
    <BaseImage class="w-full" :url="gameImgUrl || ''" :name="gameInfo.name" is-cloud loading="eager" />
    <div class="absolute flex h-5 items-center rounded-md right-1 bottom-1 bg-black_alpha20 px-1.5">
      <BaseIcon class="mr-1 w-3" name="person" />
      <span class="text-xs font-semibold text-[white]">{{ gameInfo.online_num }}</span>
    </div>
  </div>
  <div v-else @click="toSupplier" class="relative flex  flex-col items-center overflow-hidden rounded-lg group">
    <BaseImage class="w-full" :url="supplierInfo?.icon || ''" is-cloud loading="eager" />
  </div>
</template>

<style scoped lang="scss"></style>
